// 我的发布展示
import React, { useState, useEffect } from 'react'
import { NavBar, Tabs, Card, Button, ProductCard } from 'react-vant'
import { useNavigate, useParams } from 'react-router-dom'
import { myShowList, myShoopupdate } from '../request/api'
import CSS from './myPl.module.css'
export default function MyOrder() {
    const navigate = useNavigate()
    const {status}=useParams()
    const [activeTab, setActiveTab] = useState(status || 'all')
    const handleLeftClick = () => {
        navigate(-1)
    }
    const [list, setList] = useState([])
    const getList = () => {
        myShowList().then(res => {
            setList(res.data.data)
        })
    }
    useEffect(() => {
        getList()
        console.log(list);
    }, [])

    // 根据 activeTab 过滤列表
    const filteredList = list.filter(item => {
        switch (activeTab) {
            case 'all':
                return true;
            case 'On-Sale':
                return !item.isSuccessfulTrade;
            case 'Sold':
                return item.isSuccessfulTrade;
            default:
                return true;
        }
    });
    const handleRemove = (id) => {
        const res = myShoopupdate(id).then(res => {
            if (res.data.code === 200) {
                getList()
            }
        })
    }
    return (
        <>
            <div>
                <NavBar
                    title='我的商品'
                    leftText='返回'
                    onClickLeft={handleLeftClick}
                />
            </div>
            <div>
                <Tabs active={activeTab} onChange={setActiveTab}>
                    <Tabs.TabPane name={"pron"} title="全部" >
                        {
                            filteredList.map(item => {
                                return <Card round>
                                    <Card.Header border className={CSS.card_1}><span >商品ID:{item._id}</span></Card.Header>
                                    <Card.Body
                                        style={{
                                            height: '15vh',
                                            display: 'flex',
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                        }}
                                    >
                                        <ProductCard
                                            style={{ width: '100%' }}
                                            price={item.price}
                                            num={item.label}
                                            desc="描述信息"
                                            title={item.title}
                                            thumb={item.imgSrc[0] ? item.imgSrc[0] : 'https://img.yzcdn.cn/vant/ipad.jpeg'}
                                        />
                                    </Card.Body>
                                    <Card.Footer border>

                                    </Card.Footer>
                                </Card>
                            })
                        }
                    </Tabs.TabPane>
                    <Tabs.TabPane name={"On-Sale"} title="出售中" >
                        {
                            filteredList.map(item => {
                                if (item.shelfOrNot) {
                                    return <Card round>
                                        <Card.Header border className={CSS.card_1}><span >商品ID:{item._id}</span></Card.Header>
                                        <Card.Body
                                            style={{
                                                height: '15vh',
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                            }}
                                        >
                                            <ProductCard
                                                style={{ width: '100%' }}
                                                price={item.price}
                                                num={item.label}
                                                desc="描述信息"
                                                title={item.title}
                                                thumb={item.imgSrc[0] ? item.imgSrc[0] : 'https://img.yzcdn.cn/vant/ipad.jpeg'}
                                            />
                                        </Card.Body>
                                        <Card.Footer border>
                                            <Button round >
                                                修改价格
                                            </Button>
                                            <Button round onClick={() => handleRemove(item)}>
                                                下架
                                            </Button>
                                        </Card.Footer>
                                    </Card>
                                }
                            })
                        }
                    </Tabs.TabPane>
                    <Tabs.TabPane name={"Sold"} title="已售中" >
                        {
                            filteredList.map(item => {
                                return <Card round>
                                    <Card.Header border className={CSS.card_1}><span >商品ID:{item._id}</span></Card.Header>
                                    <Card.Body
                                        style={{
                                            height: '15vh',
                                            display: 'flex',
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                        }}
                                    >
                                        <ProductCard
                                            style={{ width: '100%' }}
                                            price={item.price}
                                            num={item.label}
                                            desc="描述信息"
                                            title={item.title}
                                            thumb={item.imgSrc[0] ? item.imgSrc[0] : 'https://img.yzcdn.cn/vant/ipad.jpeg'}
                                        />
                                    </Card.Body>
                                    <Card.Footer border>

                                    </Card.Footer>
                                </Card>
                            })
                        }
                    </Tabs.TabPane>
                    <Tabs.TabPane name={"Removed"} title="已下架" >
                        {
                            filteredList.map(item => {
                                if (!item.shelfOrNot) {
                                    return <Card round>
                                        <Card.Header border className={CSS.card_1}><span >商品ID:{item._id}</span></Card.Header>
                                        <Card.Body
                                            style={{
                                                height: '15vh',
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                            }}
                                        >
                                            <ProductCard
                                                style={{ width: '100%' }}
                                                price={item.price}
                                                num={item.label}
                                                desc="描述信息"
                                                title={item.title}
                                                thumb={item.imgSrc[0] ? item.imgSrc[0] : 'https://img.yzcdn.cn/vant/ipad.jpeg'}
                                            />
                                        </Card.Body>
                                        <Card.Footer border>
                                            <Button round >
                                                修改价格
                                            </Button>
                                            <Button round onClick={() => handleRemove(item)}>
                                                上架
                                            </Button>
                                        </Card.Footer>
                                    </Card>
                                }
                                return null;
                            })
                        }
                    </Tabs.TabPane>
                </Tabs>
            </div>
        </>
    )
}